
<%
math.randomseed(os.time())
-%>
<html>

<head>
    <link rel="stylesheet" href="/luci-static/vssr/css/vssr.css??v=<%=math.random(1,100000)%>">
    <script src="<%=media%>/js/jquery.min.js"></script>
</head>

<body> 


    <div class="pure-g status">
        <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
                    <h4 id="vssr_status"><%:Client%><br /><span class="red"><%:Not Running%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
                    <img src="/luci-static/vssr/img/client.svg">
                    </div>
                </div>
            </div>
        </div>
           <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
                    <h4 id="baidu_status"><%:baidu%><br /><span class="red"><%:Problem detected%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
           <img src="/luci-static/vssr/img/baidu.svg">
                    </div>
                </div>
            </div>
        </div>

      <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
                    <h4 id="google_status"><%:youtube%><br /><span class="red"><%:Problem detected%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
                        <img src="">
                    </div>  
                </div>
            </div>
        </div>

        <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
                    <h4 id="game_status"><%:Game Mode%><br /><span class="red"><%:Not Running%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
                        <img src="/luci-static/vssr/img/udp.svg">
                    </div>
                </div>
            </div>
        </div>
        <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
                    <h4 id="chinadns_status">𝐂𝐡𝐢𝐧𝐚𝐃𝐍𝐒<br /><span class="red"><%:Not Running%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
                        <img src="/luci-static/vssr/img/chinadns.svg">
                    </div>
                </div>
            </div>
        </div>
        <div class="pure-u-1-6">
            <div class="block pure-g">
                <div class="pure-u-3-5">
                    <h4 id="socks5_status">𝙎𝙊𝘾𝙆𝙎5<br /><span class="red"><%:Not Running%>✘</span></h4>
                </div>
                <div class="pure-u-2-5">
                    <div class="img-con">
                        <img src="/luci-static/vssr/img/socks5.svg">
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        const VSSR_ASSETS = '/luci-static/vssr/';
        function get_state(){
            $.get('<%=url([[admin]], [[vpn]], [[vssr]], [[run]])%>',
            function (data) {
                console.log(data);
            }, "json");
        }
        //get_state();
        //<![CDATA[
        XHR.poll(5, '<%=url([[admin]], [[vpn]], [[vssr]], [[run]])%>', null,
            function (x, data) {
                var tb = document.getElementById('vssr_status');
                var tb1 = document.getElementById('google_status');
                var tb2 = document.getElementById('baidu_status');
                var tb3 = document.getElementById('game_status');
                var tb4 = document.getElementById('chinadns_status');
                var tb5 = document.getElementById('socks5_status');
                if (data && tb) {
                    if (data.global) {
                        tb.innerHTML = '<%:Client%><br><span class="green"><%:Running%>✔</span>';
                    } else {
                        tb.innerHTML = '<%:Client%><br><span class="red"><%:Not Running%>✘</span>';
                                 }
                    if (data.google) {
                        tb1.innerHTML = '<%:youtube%><br><span class="green"><%:Connect OK%>✔</span>';
                    } else {
                        tb1.innerHTML = '<%:youtube%><br><span class="red"><%:Problem detected%>✘</span>';
                    }
                    if (data.baidu) {
                        tb2.innerHTML = '<%:baidu%><br><span class="green"><%:Connect OK%>✔</span>';
                    } else {
                        tb2.innerHTML = '<%:baidu%><br><span class="red"><%:Problem detected%>✘</span>';
                    }
                    if (data.game) {
                        tb3.innerHTML = '<%:Game Mode%><br><span class="green"><%:Running%>✔</span>';
                    } else {
                        tb3.innerHTML = '<%:Game Mode%><br><span class="red"><%:Not Running%>✘</span>';
                    }
                    if (data.chinadns) {
                        tb4.innerHTML = '𝐂𝐡𝐢𝐧𝐚𝐃𝐍𝐒<br><span class="green"><%:Running%>✔</span>';
                    } else {
                        tb4.innerHTML = '𝐂𝐡𝐢𝐧𝐚𝐃𝐍𝐒<br><span class="red"><%:Not Running%>✘</span>';
                    }
                    if (data.socks5) {
                        tb5.innerHTML = '𝙎𝙊𝘾𝙆𝙎5<br><span class="green"><%:Running%>✔</span>';
                    } else {
                        tb5.innerHTML = '𝙎𝙊𝘾𝙆𝙎5<br><span class="red"><%:Not Running%>✘</span>';
                    }
                }
            }
        );
        
//]]>
    </script>
</body>

</html></fieldset>  
